<template>
  <view>
    <view class="login">
      <u-top-tips ref="uTips"></u-top-tips>
      <view class="content">
        <view class="welcome">
          <view class="text">
            <view> Hi~ </view>
            <view> 停简单欢迎您 </view>
          </view>
          <view class="img">
            <image src="../../static/image/login-pic.png"></image>
          </view>
        </view>
        <view class="form">
          <view class="tabs">
            <!-- 全局选项卡 -->
            <u-tabs-swiper
              ref="uTabs"
              :list="list"
              :is-scroll="false"
              bar-width="80"
              font-size="32"
              :current="current"
              @change="tabsChange"
            ></u-tabs-swiper>
          </view>

          <swiper
            class="swiper-box"
            :current="swiperCurrent"
            @transition="transition"
            @animationfinish="animationfinish"
          >
            <!-- Toast消息提示 -->
            <!-- 登录 -->
            <swiper-item class="swiper-item login-item">
              <scroll-view
                scroll-y
                style="height: 100%; width: 100%"
                @scrolltolower="reachBottom"
              >
                <view>
                  <u-form :model="formLogin" ref="uFormLogin">
                    <!-- 手机号 -->
                    <u-form-item
                      prop="phoneLogin"
                      left-icon="account-fill"
                      :left-icon-style="leftIconStyle"
                    >
                      <u-input
                        v-model="formLogin.iphone"
                        maxlength="11"
                        placeholder="请输入手机号"
                      />
                    </u-form-item>
                    <!-- 密码 -->
                    <u-form-item
                      prop="passwordLogin"
                      left-icon="lock-fill"
                      :left-icon-style="leftIconStyle"
                    >
                      <u-input
                        v-model="formLogin.password"
                        type="password"
                        :clearable="false"
                        placeholder="请输入密码"
                      />
                    </u-form-item>
                  </u-form>
                  <!-- 下方提示 -->
                  <view class="tips">
                    <view class="" @click="backIndex"> 返回首页 </view>
                    <view class="" @click="gotoPassword"> 忘记密码？ </view>
                  </view>

                  <!-- 登录按钮 -->
                  <u-button type="primary" class="login-btn" @click="login"
                    >登录</u-button
                  >
                </view>
              </scroll-view>
            </swiper-item>
            <!-- 注册 -->
            <swiper-item class="swiper-item register-item">
              <scroll-view
                scroll-y
                style="height: 100%; width: 100%"
                @scrolltolower="reachBottom"
              >
                <view class="form-regiser">
                  <u-form :model="formRegiser" ref="uFormRegister">
                    <!-- 手机号 -->
                    <u-form-item
                      prop="phoneRegister"
                      left-icon="phone-fill"
                      :left-icon-style="leftIconStyle"
                    >
                      <u-input
                        v-model="formRegiser.iphone"
                        maxlength="11"
                        placeholder="请输入手机号"
                      />
                    </u-form-item>
                    <!-- 验证码 -->
                    <u-form-item
                      prop="codeRegister"
                      left-icon="email-fill"
                      :left-icon-style="leftIconStyle"
                    >
                      <u-input
                        v-model="formRegiser.code"
                        placeholder="请输入验证码"
                      />
                      <view class="wrap">
                        <u-toast ref="uToast"></u-toast>
                        <u-verification-code
                          :seconds="seconds"
                          @end="end"
                          @start="start"
                          ref="uCode"
                          @change="codeChange"
                        ></u-verification-code>
                        <u-button @tap="getCode">{{ tips }}</u-button>
                      </view>
                    </u-form-item>
                    <!-- 密码 -->
                    <u-form-item
                      prop="passwordRegister"
                      left-icon="lock-fill"
                      :left-icon-style="leftIconStyle"
                    >
                      <u-input
                        v-model="formRegiser.password"
                        type="password"
                        :clearable="false"
                        placeholder="请输入6-16含数字和字母的密码"
                      />
                    </u-form-item>
                    <!-- 确认密码 -->
                    <u-form-item
                      prop="passwordConRegister"
                      left-icon="lock-fill"
                      :left-icon-style="leftIconStyle"
                    >
                      <u-input
                        v-model="formRegiser.passwordCon"
                        type="password"
                        :clearable="false"
                        placeholder="请输入确认密码"
                      />
                    </u-form-item>
                    <!-- 昵称 -->
                    <u-form-item
                      prop="nameRegister"
                      left-icon="account-fill"
                      :left-icon-style="leftIconStyle"
                    >
                      <u-input
                        v-model="formRegiser.username"
                        placeholder="请输入昵称"
                      />
                    </u-form-item>
                  </u-form>
                </view>
                <u-button
                  type="primary"
                  class="register-btn"
                  @click="register"
                  :loading="loading"
                  >注册
                </u-button>
                <!-- Toast消息提示 -->
                <u-toast ref="uToast" />
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      tips: '',
      // refCode: null,
      seconds: 60,
      // 登陆表单
      formLogin: {
        iphone: '',
        password: '',
      },
      // 注册表单
      formRegiser: {
        iphone: '',
        code: '',
        password: '',
        passwordCon: '',
        username: '',
      },

      // tab列表
      list: [
        {
          name: '登录',
        },
        {
          name: '注册',
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      leftIconStyle: {
        color: '#0081ff',
        fontSize: '40rpx',
      },
      // 手机是否注册
      hasphone: false,
      // 按钮是否加载
      loading: false,
    }
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    // 提示
    toast(title) {
      this.$refs.uToast.show({
        title: title,
        position: 'top',
      })
    },
    // 返回首页
    backIndex() {
      this.$u.route({
        url: 'pages/index/index',
        type: 'tab',
      })
    },
    // 登录
    login() {
      // 判断手机号格式是否正确
      if (!this.$u.test.mobile(this.formLogin.iphone)) {
        this.toast('手机号格式错误')
      } else {
        // 登陆 若成功跳转到首页
        this.$u.api
          .login({
            iphone: this.formLogin.iphone,
            password: this.formLogin.password,
          })
          .then(res => {
            console.log(res)
            if (res.meta.status == 200) {
              // 将token存到缓存中
              uni.setStorageSync('token', res.data.token)
              // 将用户名存到缓存
              uni.setStorageSync('username', res.data.username)
              // 将手机号存到缓存
              uni.setStorageSync('iphone', res.data.iphone)
              this.$u.vuex('vuex_token', uni.getStorageSync('token'))
              this.$u.toast('登录成功')
              // 跳转到首页
              this.$u.route({
                url: 'pages/index/index',
                type: 'tab',
              })
            } else {
              this.$u.toast('手机或密码错误')
            }
          })
      }
    },
    // 注册
    register() {
      // console.log(pattern.test(this.formRegiser.password));
      // this.$u.get('/user', {
      // 	iphone: this.formRegiser.iphone,
      // }).then(res => {
      // 	if (res.length > 0)
      // 		this.hasphone = true
      // })
      // let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      // pattern.lastIndex = 0
      if (!this.$u.test.mobile(this.formRegiser.iphone)) {
        this.toast('手机号格式错误')
      } else if (this.formRegiser.code !== '2468') {
        this.toast('验证码错误，应为2468')
      }
      // // 至少6-16个字符，含字母和数字，其他可以是任意字符：
      else if (
        !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g.test(
          this.formRegiser.password
        )
      ) {
        console.log(this.formLogin.password)
        this.toast('至少6-16位并且含字母和数字')
        // pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,16}$/
      }
      // 两次密码输入不同
      else if (this.formRegiser.password !== this.formRegiser.passwordCon) {
        this.toast('两次输入的密码不一致')
      }
      // 昵称不能为空
      else if (this.formRegiser.name == '') {
        this.toast('昵称不能为空')
      }
      // 注册成功
      else {
        this.$u.api
          .register({
            username: this.formRegiser.username,
            password: this.formRegiser.password,
            code: this.formRegiser.code,
            iphone: this.formRegiser.iphone,
          })
          .then(res => {
            console.log(res)
            if (res.meta.status == 404) {
              this.toast('手机号已经注册')
            } else {
              console.log(this.formLogin.iphone, this.formRegiser.iphone)
              this.formLogin.iphone = this.formRegiser.iphone
              this.formLogin.password = this.formRegiser.password
              this.$u.toast('注册成功')
              setTimeout(() => {
                console.log(1)
                this.tabsChange()
              }, 1000)
            }
          })
      }
    },
    gotoPassword() {
      this.$u.route('pages/public/password')
    },

    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码',
        })
        setTimeout(() => {
          uni.hideLoading()
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送')
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start()
        }, 1000)
      } else {
        this.$u.toast('倒计时结束后再发送')
      }
    },
    // end() {
    // 	this.$u.toast('倒计时结束');
    // },
    start() {
      this.$u.toast('验证码位2468')
    },
  },
}
</script>

<style lang="scss">
.login {
  // background-color: $page-color;
  .content {
    width: 100%;

    .welcome {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 460rpx;
      width: 100%;
      background-color: $base-color;

      .text {
        color: #ffffff;
        font-size: 50rpx;
        margin: 0 0 110rpx 40rpx;
      }

      .img {
        image {
          width: 220rpx;
          height: 270rpx;
        }

        margin: 0 40rpx 80rpx 0;
      }
    }

    .form {
      height: 1150rpx;
      margin: -60rpx 20rpx 0 20rpx;

      .swiper-box {
        height: 1150rpx;

        .login-item {
          height: 100%;
          width: 100%;
          background-image: url(../../static/image/login-bg.png);
          background-repeat: no-repeat;
          background-size: 100% 700rpx;

          // background-color: #0081FF;
          .u-form {
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-content: space-around;
            width: 100%;
            height: 380rpx;
            padding: 0 50rpx 0 50rpx;
            // background-color: #007AFF;
          }

          .tips {
            display: flex;
            justify-content: space-around;
            color: $base-color;
          }

          .login-btn {
            margin-top: 60rpx;
            width: 85%;
            border-radius: 30rpx;
          }
        }

        .register-item {
          height: 100%;
          width: 100%;
          background-image: url(../../static/image/login-bg.png);
          background-repeat: no-repeat;
          background-size: 100% 950rpx;

          // background-color: #0081FF;
          .u-form {
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-content: space-around;
            width: 100%;
            height: 700rpx;
            padding: 0 50rpx 0 50rpx;
            // background-color: #007AFF;
          }
        }

        .register-btn {
          width: 90%;
          border-radius: 30rpx;
        }
      }
    }
  }
}
</style>
